<template>
  <div id="Goodsclass">
    <div id="center">
      <div>
        <div class="selected_title">
          <b>好学畅学</b>
          <p>查看更多></p>
        </div>
        <div class="tabpage">
          <button id="bt1" @click="fun('Btone')">本月上心</button>
          <button id="bt2" @click="fun('Bttwo')">IT互联网</button>
          <button id="bt2" @click="fun('Btthree')">职场提升</button>
          <button id="bt2" @click="fun('Btfour')">设计创作</button>
        </div>
        <component :is="com"></component>
        <div class="tabbtn">
          <div class="button_ipt">
            <input type="button" value="上一页" @click="fun('Btone')">
          <input type="button" value="下一页" @click="fun('Bttwo')">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Btone from "./bt3page.vue";
import Bttwo from "./bt4page.vue";
import Btthree from "./bt5page.vue";
import Btfour from "./bt6page.vue";
export default {
  methods: {
    fun(data) {
      this.com = data;
    }
  },
  data() {
    return {
      com: "Btone"
    };
  },
  components: {
    Btone,
    Bttwo,
    Btthree,
    Btfour
  }
};
</script>

<style scoped>
#Goodsclass {
  width: 100%;
  margin-bottom: .2rem;
}
#center {
  width: 3.45rem;
  margin: auto;
}
.selected_title {
  width: 100%;
  height: 0.54rem;
  line-height: 0.32rem;
  font-size: 0.18rem;
}
.selected_title b{
    width: 1rem;
    float: left;
}
.selected_title p{
    width: 1rem;
    float: right;
    text-align: right;
    font-size: .12rem;
}
.tabpage {
  width: 100%;
  height: 0.32rem;
}
.tabpage button {
  width: 0.8rem;
  height: 0.32rem;
  line-height: 0.32rem;
  border-style: none;
  background-color: white;
}
#bt1 {
  color: orange;
}
.tabbtn{
  width: 100%;
  height: .42rem;
}
.button_ipt{
  width: 1.8rem;
  height: 100%;
  margin: auto;
  line-height: .42rem;
}
.tabbtn .button_ipt input{
width: .7rem;
height: .3rem;
font-size: .12rem;
margin-left: .05rem;
margin-right: .05rem;
}
.tabbtn .button_ipt input:nth-child(1) {
color: #c2c4c3;
}
</style>
